<template>
  <!-- 退租流程第二步 -->
  <div class="secondStepPage">
    <BaseEditor
      :getHtmlContent="state.ctx"
      :excludeArr="state.editorExcludeArr"
      getHight="557px"
      @getEditorVal="getEditorVal"
    />
    <div class="btnBox m-t10">
      <el-button
        color="#FF7B50"
        style="color: #fff"
        type="primary"
        @click="backPrev"
        >返回上一步</el-button
      >
      <el-button
        color="#FF7B50"
        style="color: #fff"
        type="primary"
        @click="goNext"
        >下一步</el-button
      >
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, watch } from "vue";
import BaseEditor from "@/components/BaseEditor";
import { localGet } from "@/common/utils/GlobalUtils";
import { thorwLeaseApi } from "@/api/coordination";

const state = reactive({
  ctx: null,
  getRentOutId: "",
  editorExcludeArr: ["group-image", "group-video", "emotion"],
  getHtml: "",
});

const getEditorVal = (val) => {
  state.getHtml = val;
};
// 根据退租编号，获取需要赋值给富文本的内容
const getWordVal = (id) => {
  thorwLeaseApi.getBindDataWord(id).then((res) => {
    state.ctx = res;
    state.getHtml = res;
  });
};

// 定义向父组件传值方法
const emits = defineEmits(["nextStep"]);
const backPrev = () => {
  emits("nextStep", "GoPreview");
};

const goNext = () => {
  let params = {
    rentOutId: state.getRentOutId,
    htmlContent: state.getHtml,
  };
  thorwLeaseApi.saveRentOutWord(params).then((res) => {
    const { code, data, msg } = res;
    if (code == 200) {
      emits("nextStep", "GoSubmit");
    }
  });
};

onMounted(() => {
  state.getRentOutId = localGet("RentOutId");
  getWordVal(state.getRentOutId);
});
</script>

<style lang="scss" scoped>
.secondStepPage {
  .btnBox {
    text-align: center;
  }
}
</style>
